const reactive = Vue.reactive
const ref = Vue.ref
const toRef = Vue.toRef
const toRefs = Vue.toRefs

/**
 * toRef 和 toRefs 
 * 
*/
export default {
  name: 'ref-isref',
  template: `
    <div>
      展示 toRef、toRefs <br>
      reactive 对象：{{person}} <br><br>
      获取属性：{{name}} <br><br>
      toRef获取属性：{{refName}} <br><br>
      <el-button @click="update" type="primary">修改属性</el-button><br><br>
    </div>
  `,
  setup () {
    /**
     * 定义 reactive
     * 直接解构属性，看响应性
     * 使用toRef解构，看响应性
     * 使用toRefs解构，看响应性
     * 按钮只修改reactive
     */
    const person = reactive({
      name: 'jyk',
      age: 18
    })
    console.log('person ', person )

    // 直接获取属性
    const name = person.name
    console.log('name ', name )
    
    const refName = toRef(person, 'name')
    console.log('refName ', refName )

    const personToRefs = toRefs(person)
    console.log('personToRefs ', personToRefs )

    const update = () => {
      // 修改原型
      person.name = new Date()
    }

    return {
      person, // reactive
      name, // 获取属性
      refName, // 使用toRef
      personToRefs,
      update // 修改属性
    }
  }
}
  